<template>
  <div>
    <div class="warp_top">
      <!-- 搜索条件 -->
      <div class="jiansuo-box">
        <span class="label"></span>
        名称：
        <el-input
          v-model="diagnoseCoefficientName"
          class="input"
          clearable
          placeholder="请输入名称"
        />
      </div>

      <div class="jiansuo-box">
        <span class="label">类型：</span>
        <el-select v-model="value2" placeholder="请选择" class="input" clearable>
          <el-option
            v-for="item in arrlist"
            :key="item.id"
            :label="item.diagnose_type_name"
            :value="item.id"
          />
        </el-select>
      </div>

      <div class="jiansuo-box">
        <span class="label">状态：</span>
        <el-select v-model="value" placeholder="请选择" class="input" clearable>
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>

      <div class="jiansuo-box">
        <el-button
          type="primary"
          icon="el-icon-search"
          class="btn1"
          @click="btn"
        >检索</el-button>
        <el-button
          type="primary"
          icon="el-icon-plus"
          class="btn"
          @click="dialogFormVisible = true"
        >新增模板</el-button>
      </div>
    </div>

    <!-- 新增模板 -->
    <el-dialog
      title="新增诊断分类模板"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="模板名称：" prop="diagnoseCoefficientName">
          <el-input
            v-model="ruleForm.diagnoseCoefficientName"
            class="el-inputer"
            placeholder="请输入类型名称"
          />
        </el-form-item>
        <el-form-item label="类型：" prop="diagnoseCoefficientId">
          <el-select
            v-model="ruleForm.diagnoseCoefficientId"
            placeholder="请选择"
            class="el-inputer"
            clearable
          >
            <el-option
              v-for="item in arrlist"
              :key="item.id"
              :label="item.diagnose_type_name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="系数：">
          <el-input
            v-model="ruleForm.coefficientNum"
            class="el-inputer"
            placeholder="请输入类型名称"
          />
        </el-form-item>
        <el-form-item label="排序：" prop="sortNum">
          <el-input-number
            v-model="ruleForm.sortNum"
            class="el-inputer1"
            controls-position="right"
            :min="1"
            :max="10"
            @change="handleChange"
          />
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-switch
            v-model="ruleForm.status"
            class="switch-btn"
            inactive-text="禁用"
            active-text="启用"
            :active-value="1"
            :inactive-value="0"
            active-color="#02538C"
            inactive-color="#B9B9B9"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          :plain="true"
          type="primary"
          @click="submitForm_leix('ruleForm')"
        >保 存</el-button>
      </div>
    </el-dialog>

    <!-- 分类模板表格明细 -->
    <el-card>
      <el-table
        :data="arr"
        style="width: 100%"
        height="538"
        stripe
        :header-cell-style="{ background: '#d2e0f9', color: '#606266' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
        />
        <el-table-column label="模板名称" min-width="50%" align="center">
          <template slot-scope="scope">
          <span style="margin-left: 10px">{{
              scope.row.diagnose_coefficient_name
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="预计病死率诊断分类系数"
          min-width="40%"
          align="center"
        >
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.coefficient_num }}</span>
          </template>
        </el-table-column>
        <el-table-column label="类型" min-width="50%" align="center">
          <template slot-scope="scope">
          <span style="margin-left: 10px">{{
              scope.row.diagnose_type_name
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          property="status"
          label="状态"
          width="180"
          align="center"
          header-align="center"
        >
          <template scope="scope">
            <el-switch
              v-model="scope.row.status"
              class="switch-btn"
              inactive-text="禁用"
              active-text="启用"
              :active-value="1"
              :inactive-value="2"
              active-color="#02538C"
              inactive-color="#B9B9B9"
              @change="changeSwitchs(scope.$index, scope.row)"
            />
          </template>
        </el-table-column>

        <el-table-column label="排序" align="center" min-width="60%">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.sort_num }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="60%">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-popover
              :ref="`popover-${scope.$index}`"
              trigger="click"
              placement="top"
              width="100"
            >
              <p class="el-icon-warning">确定删除</p>
              <div style="text-align: right; margin: 0">
                <el-button
                  size="mini"
                  type="text"
                  @click="no(scope)"
                >取消</el-button>
                <el-button
                  type="primary"
                  size="mini"
                  @click="yes(scope)"
                >确定</el-button>
              </div>
              <el-button
                slot="reference"
                size="mini"
                style="margin-left: 10px"
                type="danger"
              >删除</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <ossios
        :dialog-visible="dialogVisible"
        :dialog-info="dialogInfo"
        @update:dialogVisible="dialogVisibles"
      />
    </el-card>
    <!-- switch -->
    <el-dialog title="状态更新" :visible.sync="dialogUpdata" class="mod_box1">
      <span>
        <i class="el-icon-warning" />此操作将会改变开关状态, 是否继续?</span>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="(dialogUpdata = false), cancelSwitch()"
        >取 消</el-button>
        <el-button
          type="primary"
          @click="(dialogUpdata = false), updataSwitch()"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from 'axios'
import ossios from '@/components/mask/ossios'
import { MessageBox, Message } from 'element-ui'
import {
  diagnosisQuest,
  diagnoseCoefficinetItemDictionaryQuest,
  diagnoseCoefficinetItemDictionaryDelete,
  diagnoseCoefficinetItemDictionaryInsert,
  diagnoseCoefficinetItemDictionaryUpdate
} from '@/api/table'

export default {
  components: {
    ossios
  },
  data() {
    return {
      dialogUpdata: false, // 开关
      switchId: '',
      switchStatus: '',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      leixin: '',
      optionsleixin: [],
      activeName: 'first',
      // 控制弹窗 显示
      dialogVisible: false,
      // 点击查看按钮  这条数据详细信息
      dialogInfo: {},

      listarr: null,
      listLoading: true,
      loading: false,
      diagnoseCoefficientName: '',
      status: '',
      coefficientNum: '',
      sortNum: '',
      diagnoseCoefficientId: '',

      dialogFormVisible: false,
      dialogFor: false,
      del: false,
      ruleForm: {
        diagnoseCoefficientName: '',
        diagnoseCoefficientId: '',
        status: '',
        coefficientNum: '',
        sortNum: ''
      },
      rules: {
        diagnoseCoefficientName: [
          { required: true, message: '请输入模板名称', trigger: 'blur' }
        ],
        diagnoseCoefficientId: [
          { required: true, message: '请输入模板类型名称', trigger: 'blur' }
        ],
        sortNum: [{ required: true, message: '请输入排序', trigger: 'blur' }]
      },

      options: [
        {
          id: '0',
          value: '1',
          label: '启用'
        },
        {
          id: '1',
          value: '0',
          label: '禁用'
        }
      ],
      value: '',
      value2: '',
      diagnoseCoefficientId: '',
      arr: [],
      arrleix: [], // 新增类型
      start: 1, // 默认显示第几页
      totalCount: 0, // 总条数，根据接口获取数据长度(注意：这里不能为空)
      pgeSizes: [10, 20, 30, 40], // 个数选择器（可修改）
      PageSize: 10, // 默认每页显示的条数（可修改）
      status: '',
      roleName: '',
      num: 1,
      arrlist: []
    }
  },
  created() {},
  mounted() {
    this.diagnoseCoefficinetItemDictionaryQuest(this.PageSize, this.start)
    this.diagnosisQuest()
  },
  methods: {
    yes(scope) {
      // 可以在这里执行删除数据的回调操作.......删除操作......
      console.log(scope.row.id)
      const id = scope.row.id
      diagnoseCoefficinetItemDictionaryDelete({ id: id }).then((res) => {})
      this.$message({
        message: '删除成功',
        type: 'success'
      })
      scope._self.$refs[`popover-${scope.$index}`].doClose()
      this.diagnoseCoefficinetItemDictionaryQuest(this.PageSize, this.start)
    },

    no(scope) {
      this.$message('取消删除')
      scope._self.$refs[`popover-${scope.$index}`].doClose()
    },

    // 新增模板
    submitForm_leix(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          diagnoseCoefficinetItemDictionaryInsert({
            diagnoseCoefficientName: this.ruleForm.diagnoseCoefficientName,
            status: this.ruleForm.status,
            coefficientNum: this.ruleForm.coefficientNum,
            sortNum: this.ruleForm.sortNum,
            diagnoseCoefficientId: this.ruleForm.diagnoseCoefficientId
          }).then((res) => {
            if (res.code === 3) {
              Message({
                message: res.msg,
                type: 'error',
                duration: 5 * 1000
              })
              this.dialogFormVisible = true
            } else {
              this.arrleix = res.data
              this.dialogFormVisible = false
            }
            this.diagnoseCoefficinetItemDictionaryQuest(
              this.PageSize,
              this.start
            )
          })
        } else {
          this.$message({
            message: '请填写必填项！',
            type: 'warning',
            duration: 1500
          })
          this.dialogFormVisible = true
          return false
        }
      })
    },

    // 下拉获取id
    currentSel(selVal) {
      this.diagnoseCoefficientName = selVal.user_type_code
      // console.log(this.diagnoseCoefficientName );
    },

    // 列表开关的id
    changeSwitchs(index, row) {
      this.switchId = row.id
      this.switchStatus = row.status
      this.dialogUpdata = true
    },
    // 保存开关状态-确认
    updataSwitch() {
      diagnoseCoefficinetItemDictionaryUpdate({
        id: this.switchId,
        status: this.switchStatus
      }).then((res) => {
        this.diagnoseCoefficinetItemDictionaryQuest(this.PageSize, this.start)
      })
    },
    // 保存开关状态-取消
    cancelSwitch() {
      this.diagnoseCoefficinetItemDictionaryQuest(this.PageSize, this.start)
    },
    // 搜索按钮
    btn() {
      diagnoseCoefficinetItemDictionaryQuest({
        diagnoseCoefficientName: this.diagnoseCoefficientName,
        status: this.value === '' ? null : Number(this.value),
        diagnoseCoefficientId: this.value2 === '' ? null : this.value2
      }).then((res) => {
        this.arr = res.data
      })
    },
    handleEdit(info) {
      // 弹窗打开
      this.dialogVisible = true
      this.dialogInfo = info
      console.log(info)
    },
    // 子组件传 过来的 数据
    dialogVisibles(v) {
      this.dialogVisible = v
      this.diagnoseCoefficinetItemDictionaryQuest(this.PageSize, this.start)
    },
    handlediagnoseCoefficinetItemDictionaryDelete(index, row) {
      console.log(index, row)
    },
    diagnoseCoefficinetItemDictionaryQuest(n1, n2) {
      diagnoseCoefficinetItemDictionaryQuest({
        size: n1,
        start: n2
      }).then((res) => {
        this.arr = res.data
        this.totalCount = res.totalCount
      })
    },
    // 下拉
    diagnosisQuest() {
      diagnosisQuest().then((res) => {
        this.arrlist = res.data
        console.log(this.arrlist,'//')
      })
    },
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val
      // 点击每页显示的条数时，显示第一页
      this.list(val, 1)
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.start = 1
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.start = val

      // 切换页码时，要获取每页显示的条数
      this.diagnoseCoefficinetItemDictionaryQuest(
        this.PageSize,
        (this.start = val)
      )
    },
    change: function(index, row) {
      console.log(index, row, '---')
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    handleChange(value) {
      console.log(value)
    }
  }
}
</script>
